<template>
  <div class="copyright-box">
    <div class="copyright-box-top">
      <div class="title-heard">
        <div class="title">
          <titles title="学术研究" />
        </div>
        <div class="right-box-content">
          <div class="right-box">
            <t-popup content="" placement="bottom" :visible="visible">
              <template #content>
                <div class="pop-box">
                  <div class="pop-item hw-click-cursor" @click="setTypeId(0)">全部</div>
                  <div
                    class="pop-item hw-click-cursor"
                    @click="setTypeIds(item)"
                    v-for="item in selectList"
                    :key="item.id"
                  >
                    {{ item.text }}
                  </div>
                  <!-- <div class="pop-item hw-click-cursor">论著</div>
                    <div class="pop-item hw-click-cursor">展览</div> -->
                </div>
              </template>
              <div class="pop-heard" @click="visible = !visible">
                <span
                  :style="{
                    color: colorList5[store.styleInfo.colorType - 1].fontColor,
                  }"
                  >{{ TypeTitle }}</span
                >
                <t-icon
                  :style="{
                    color: colorList5[store.styleInfo.colorType - 1].fontColor,
                  }"
                  :name="visible ? 'chevron-up' : 'chevron-down'"
                  size="24"
                ></t-icon>
              </div>
            </t-popup>
          </div>
        </div>
      </div>

      <t-row style="margin-top: 26px" v-if="total > 0">
        <t-col :span="12" v-for="item in list" :key="item.id" @click="pathInfo(item.id)">
          <div
            class="item-box"
            :class="{
              'border-color-type1': store.styleInfo.colorType == 1,
              'border-color-type2': store.styleInfo.colorType == 2,
              'border-color-type3': store.styleInfo.colorType == 3,
            }"
          >
            <div class="title1">
              <p
                v-if="item.typeId"
                class="title1-color"
                :style="{
                  fontFamily: store.styleInfo.fontFamily,
                  color: colorList5[store.styleInfo.colorType - 1].shmentColor,
                }"
              >
                【
                {{ getTypeName(item.typeId) }}
                】
              </p>
              <p
                v-else
                class="title1-color"
                :style="{
                  fontFamily: store.styleInfo.fontFamily,
                  color: colorList5[store.styleInfo.colorType - 1].shmentColor,
                }"
              ></p>
            </div>
            <div class="item-child">
              <div class="item-left">
                <span
                  class="title2"
                  :style="{
                    fontFamily: store.styleInfo.fontFamily,
                    color: colorList5[store.styleInfo.colorType - 1].fontColor,
                  }"
                  >{{ item.name }}</span
                >
                <span
                  class="title3"
                  :style="{
                    color: colorList5[store.styleInfo.colorType - 1].shmentColor,
                  }"
                  >{{ item.publishedOn ? item.publishedOn : '' }}</span
                >
              </div>
              <div class="item-right">
                <span
                  class="title4"
                  :style="{
                    fontFamily: store.styleInfo.fontFamily,
                    color: colorList5[store.styleInfo.colorType - 1].fontColor,
                  }"
                  >{{ item.author }}</span
                >
                <span
                  class="title3 title5"
                  :style="{
                    color: colorList5[store.styleInfo.colorType - 1].shmentColor,
                  }"
                  >{{ item.publisher }}</span
                >
              </div>
            </div>
          </div>
        </t-col>
        <t-col
          style="margin-top: 50px"
          v-if="total > 10"
          class="pagination-content"
          :span="12"
          :class="'pagination-content-style' + store.styleInfo.colorType"
        >
          <paginationPage @change="change" :current="parmas.pageNo" :pageSize="parmas.pageSize" :total="total" />
        </t-col>
      </t-row>
      <div
        v-else
        :style="{
          color: colorList5[store.styleInfo.colorType - 1].shmentColor,
        }"
      >
        暂无相关数据
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import titles from '../components/title.vue';
import paginationPage from '../components/paginationPage.vue';
import { pagerCount } from '@/utils/minxin';
import { colorList5 } from '../../data';
import { pathList, pathListLoop } from '../index.ts';
import { treeList } from '@/api/user/user';
import { investigationList } from '@/api/investigation/investigation';
import { useRouter, useRoute } from 'vue-router';
import { ref, reactive, onActivated, nextTick, onDeactivated } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';
import { useProjectStore } from '@/store';

const store = useProjectStore();
const router = useRouter();
const route = useRoute();
const current = ref(1);
const heartbeat = ref(0); //页面心跳值
const pageSize = ref(20);
const visible = ref(false);
const types = ref(true);
const parmas = reactive({
  value: '',
  pageNo: 1,
  pageSize: 10,
  typeId: 0,
});
const windowTops = ref(0);
const TypeTitle = ref('全部');
const selectList = ref([]);
const list = ref([]);
const pageMax = ref(1);
const total = ref(0);
const loading = ref(false);

const init = async () => {
  try {
    if (loading.value) {
      return;
    }
    loading.value = true;
    let res = await investigationList(localStorage.getItem('projectId'), parmas);
    // total.value = res.data.total !== 0 ? res.data.total : 1;
    total.value = res.data.total;
    list.value = res.data.data;
    pageMax.value = pagerCount(total.value, parmas.pageSize);
    loading.value = false;
  } catch {
    loading.value = false;
  }
};
init();
const lock = ref(true);
onActivated(() => {
  lock.value = true;
  window.addEventListener('scroll', function () {
    if (!lock.value) {
      return;
    }
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop;

    windowTops.value = scrollTop;
  });
  nextTick(() => {
    if (heartbeat.value !== store.heartbeatCurrent) {
      windowTops.value = 0;
      setTypeId(0);
    } else {
      if (windowTops.value > 300) {
        nextTick(() => {
          setTimeout(() => {
            window.scrollTo({
              top: windowTops.value,
              // behavior: 'smooth', // 使用平滑滚动效果
            });
          }, 150);
        });
      }
    }
    heartbeat.value = store.heartbeatCurrent;
  });
});
onDeactivated(() => {
  lock.value = false;
  window.removeEventListener('scroll', function () {
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    // console.log('滚动距离：' + scrollTop + 'px');
    windowTops.value = scrollTop;
  });
});
const setTypeId = (id: number) => {
  parmas.typeId = id;
  parmas.pageNo = 1;
  TypeTitle.value = '全部';
  visible.value = false;
  init();
};
const setTypeIds = (info: any) => {
  parmas.typeId = info.id;
  parmas.pageNo = 1;
  TypeTitle.value = info.text;
  visible.value = false;
  init();
};
const getSelectList = async () => {
  let arr = [];
  let res = await treeList(395711118516293); //级别
  selectList.value = arr.concat(res.data);
  console.log(selectList.value);
};
const addParmasNo = (e: number) => {
  parmas.pageNo = e;
  init();
};
getSelectList();
const getTypeName = (e: any) => {
  if (e) {
    switch (e) {
      case 401792425939013:
        return '课题研究';
        break;
      case 401792277585989:
        return '出版刊物';
        break;
      case 371995677388869:
        return '未知研究';
        break;
      default:
        return '论文论著';
        break;
    }
  } else {
    return '';
  }
};
const change = (e: any) => {
  // console.log(e);
  parmas.pageNo = e.page;
  init();
  var researTitleDom = document.getElementById('timeAxis-child-box-id') as HTMLElement;
  researTitleDom.scrollIntoView({ top: 500 });
};
const pathInfo = (e: number) => {
  router.push({
    name: route.meta.loopType ? pathListLoop[6] : pathList[6],
    query: {
      id: e,
    },
  });
  setTimeout(() => {
    const ele = document.getElementById('timeAxis-child-box-id'); // 获取元素
    const top = ele.offsetTop - 140; // 获取元素距离文档顶部的距离
    window.scrollTo({
      top: top,
      behavior: 'smooth', // 设置滚动的动画效果
    });
  }, 100);
};
</script>

<style lang="less" scoped>
@import '../index.less';
.copyright-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 1180px;
  min-width: 1180px;
  padding-bottom: 80px;
}
.copyright-box-top {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.title-heard {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-bottom: 80px;
}
.right-box-content {
  position: absolute;
  top: 14px;
  right: 0px;
}
.right-box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 100px;
}
.title {
  line-height: 72px;
}
.item-box {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  padding-bottom: 32px;
  margin-bottom: 32px;
  border-bottom: 1px solid transparent;
}
.item-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.border-color-type1 {
  border-color: rgba(69, 46, 32, 0.58);
}
.border-color-type2 {
  border-color: rgba(140, 122, 87, 0.58);
}
.border-color-type3 {
  border-color: rgba(53, 60, 72, 0.58);
}
.item-left {
  width: 670px;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.item-right {
  display: flex;
  flex-direction: column;
  align-items: right;
  width: 280px;
}
.title1 {
  width: 100%;
  display: flex;
  font-size: 17px;
  font-weight: bold;
  color: #333333;
  line-height: 32px;
  text-align: left;
}
.title1-color {
  color: #c7ab8b;
}
.title2 {
  width: 100%;
  font-size: 17px;
  font-family: SourceHanSerifCN-Bold, SourceHanSerifCN;

  text-align: left;
  color: #cbb995;
  line-height: 32px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.title3 {
  width: 100%;
  font-size: 14px;
  font-family: Roboto-Regular, Roboto;
  font-weight: 400;
  line-height: 26px;
  opacity: 0.58;
  text-align: left;
}
.title4 {
  width: 280px;
  font-size: 17px;
  font-family: SourceHanSerifCN-Medium, SourceHanSerifCN;
  color: #cbb995;
  line-height: 32px;
  text-align: right;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.title5 {
  justify-content: flex-end;
  text-align: right;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pop-heard {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 24px;
}
.pop-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 4px;
}
.pop-item {
  display: flex;
  width: 100%;
  padding: 7px 20px;
  font-size: 13px;
}
.t-row {
  width: 100%;
  margin-top: 0;
}
.type-item-box {
  cursor: pointer;
  font-size: 16px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 24px;
  border-bottom: 1px solid transparent;
}
.type-item-box:hover {
  // text-decoration: underline;
  border-bottom: 1px solid #333;
}
.type-item-active {
  font-weight: bold;
  border-bottom: 1px solid #333;
}
.type-box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 50px;
}
.type-item-mg {
  margin-left: 60px;
}
</style>
